@include('Home.head')
<style>
    .root_header{
        position: fixed;
        width: 100%;
        max-width: 640px;
    }

    .am-header{
        background: linear-gradient(180deg,#d2393b 0%, #ab191a 100%);

    }
    .title{
        color: #ffffff;
    }
</style>
<body>
<div class="container" id="app">

    <div class="root_header">
    <header data-am-widget="header" class="am-header am-header-default" style="background-color: #01573e;">
        <div class="am-header-left am-header-nav">
            <a  onclick="javascript:history.back(-1);" class="">
                <i class="am-header-icon am-icon-chevron-left"></i>
            </a>
        </div>
        <h1 class="am-header-title">
            <a href="#title-link" class="" style="font-weight: 600;">推客联盟</a>
        </h1>
    </header>
    <div class="header">
        <div class="nav" @click="selNav('pdd')">
            <div class="nav-title">拼多多</div>
            <div class="nav-text" :class="[source=='pdd'? 'nav-text-active':'']">多多推荐</div>
        </div>
        <div class="nav" @click="selNav('jd')">
            <div class="nav-title">京东</div>
            <div class="nav-text" :class="[source=='jd'? 'nav-text-active':'']">好券商品</div>
        </div>
        <div class="nav" @click="selNav('taobao')">
            <div class="nav-title">淘宝</div>
            <div class="nav-text" :class="[source=='taobao'? 'nav-text-active':'']">全网好货</div>
        </div>
        <div class="nav" @click="selNav('douyin')">
            <div class="nav-title">抖音</div>
            <div class="nav-text" :class="[source=='douyin'? 'nav-text-active':'']">精选联盟</div>
        </div>
    </div>
    </div>
    <div class="goods-list" scroll-y="true" :lower-threshold="50" @scrolltolower="getData" :style="{'height':Height+'px'}">
        <div class="goods-list-main" v-for="item in list" @click="goDetail(item.goodsId)">
            <div class="goods-list-main-img">
                <image :src="item.goodsThumbUrl" mode="widthFix" class="imageh"></image>
            </div>
            <div  class="goods-list-main-title">
                @{{item.goodsName}}
            </div>
            <div class="goods-list-main-bottom">
                <div class="goods-list-price">
                    &yen;@{{item.price}}
                </div>
                <div class="goods-list-market-price">
                    &yen;@{{item.marketPrice}}
                </div>
                <div class="goods-list-sale">
                    @{{item.sales_tip}}购买
                </div>
            </div>
        </div>
    </div>



</div>
<style>
    .header{
        width: 100%;
        display: flex;
        height:60px;
        background-color: #ffffff;

    }
    .nav{
        flex: 1;
        text-align: center;
    }
    .nav-title{
        font-size: 16px;
        color: #333333;
        font-weight: 500;
        line-height: 1.8;
    }
    .nav-text{
        color: #555555;
        font-size: 10px;
    }
    .nav-text-active{
        background-color: crimson;
        color: #fff;
        border-radius: 10px;
        display: inline-block;
        padding: 2px 5px;
    }
    .goods-list{
        width: 100%;
        display: inline-block;
        background-color: #f4f4f4;
        margin-top: 108px;
    }
    .goods-list-main{
        width: 45%;
        float: left;
        margin: 10px 2.5%;
    }
    .goods-list-main-img image{
        width: 100%;
    }
    .goods-list-main-title{
        width: 100%;
        font-size: 14px;
        color: #333333;
        font-weight: 700;
        -webkit-line-clamp: 2;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        text-overflow: ellipsis;
        overflow: hidden;
    }
    .goods-list-main-bottom{
        width: 100%;
        display: flex;
        height: 40px;
    }
    .goods-list-price{
        color: crimson;
        font-size: 18px;
        font-weight: 700;
        line-height: 40px;
    }
    .goods-list-market-price{
        color: #777777;
        font-size: 10px;
        text-decoration: line-through;
        flex: 1;
        line-height: 50px;
    }
    .goods-list-sale{
        color: #777777;
        font-size: 10px;
        line-height: 50px;

    }
    .imageh{
        height: 180px;
        width: 100%;

    }
</style>
<script>

    var app = new Vue({

        el:"#app",

        data: {
            list:[],
            source:'pdd',
            page:1,
            Height:1000,
            nowPage: 0, //本页
            loading: false, //异步加载时的限制
            bottomHight: 50, //滚动条到某个位置才触发时间
            loading: false,
        },

        //事件

        methods: {

            initialize:function () {


            },
            getData(){

                var _this=this;
                $.post("/home/index/tuike_data",{'_token':'{{csrf_token()}}',"page":_this.page,"source":_this.source},function (res) {
                    if(res.code == 0){

                        if(app.page==1){
                            _this.list=res.data.list;
                        }else {
                            for (var i = 0; i < res.data.list.length; i++) {
                                // console.log(res.data.data[i])
                                _this.list.push(res.data.list[i])

                            }

                        }
                        app.loading = false;



                    } else {

                        layer.msg(res.message,{icon:7});

                    }

                },"JSON");


            },

            handleScroll(){
                if (getScrollBottomHeight() <= app.bottomHight && app.loading ==
                    false) {
                    app.page++;
                    app.loading = true;
                    this.getData()

                }
            },

            selNav(source){
                this.source = source;
                this.page = 1;
                this.getData()
            },
            goDetail(goodsId){
                var _this=this;
                window.location.href="/home/index/tuike_det?goodsId="+goodsId+"&source="+_this.source;
            },


        },

        //自动执行

        mounted: function () {

            this.getData();

        },

    });

    //添加滚动事件
    window.onload = function () {
        window.addEventListener('scroll', app.handleScroll)
    }
    //滚动条到底部的距离
    function getScrollBottomHeight() {
        return getPageHeight() - getScrollTop() - getWindowHeight();

    }
    //页面高度
    function getPageHeight() {
        return document.querySelector("html").scrollHeight
    }
    //滚动条顶 高度
    function getScrollTop() {
        var scrollTop = 0,
            bodyScrollTop = 0,
            documentScrollTop = 0;
        if (document.body) {
            bodyScrollTop = document.body.scrollTop;
        }
        if (document.documentElement) {
            documentScrollTop = document.documentElement.scrollTop;
        }
        scrollTop = (bodyScrollTop - documentScrollTop > 0) ? bodyScrollTop : documentScrollTop;
        return scrollTop;
    }

    function getWindowHeight() {
        var windowHeight = 0;
        if (document.compatMode == "CSS1Compat") {
            windowHeight = document.documentElement.clientHeight;
        } else {
            windowHeight = document.body.clientHeight;
        }
        return windowHeight;
    }

</script>
</body>
</html>